import VariableDialog from "./components/variableDialog";
import { devHistorydataReport, reportAdd, reportDel, reportFind } from "@/api/modules/iot/variable";
import { ElMessageBox, dayjs } from "element-plus";
import { Star, Menu, StarFilled } from "@element-plus/icons-vue";
import "./index.scss";
import { showTips } from "@/utils/util";
import BaseChart from "@/components/Chart/BaseChart.vue";
export default defineComponent({
	setup() {
		onMounted(async () => {
			getList();
		});
		const formData = reactive<any>({
			daterange: [dayjs().subtract(3, "d"), dayjs()],
			variable: []
		});
		const submitAdd = async (selectedList: any) => {
			formData.variable = selectedList;
			detailDialog.visible = false;
			Pageable.pageIndex = 1;
			getReport();
		};
		const getReport = async () => {
			let param = {};
			if (activeName.value == "first") {
				param = {
					startTime: dayjs(formData.daterange[0]).format("YYYY-MM-DD"),
					endTime: dayjs(formData.daterange[1]).format("YYYY-MM-DD"),
					snKeys: formData.variable,
					pageIndex: Pageable.pageIndex,
					pageSize: Pageable.pageSize,
					timeOrder: "desc"
				};
			} else {
				param = {
					startTime: dayjs(formData.daterange[0]).format("YYYY-MM-DD"),
					endTime: dayjs(formData.daterange[1]).format("YYYY-MM-DD"),
					snKeys: formData.variable,
					pageIndex: 1,
					pageSize: 9999
				};
			}
			let res = await devHistorydataReport(param);
			if (res.code == 200) {
				tableData.value = res.result.records;
				Pageable.total = res.result.total;
				let chartData: any = { dataList: [] };
				formData.variable.map((variableItem: any) => {
					tableData.value.map((item: any) => {
						chartData.dataList.push({
							time: dayjs(item.updateTime).format("YYYY-MM-DD hh:mm:ss"),
							value: item[variableItem.key],
							group: variableItem.key,
							unit: ""
						});
					});
				});

				chartView.value?.setData(chartData);
			}
		};
		const detailDialog = reactive<any>({
			title: "选择变量",
			detail: {},
			visible: false
		});
		const tableData = ref();
		const drawer = reactive<any>({
			visible: false,
			list: []
		});
		const getList = async () => {
			let res = await reportFind();
			if (res.code == 200) {
				drawer.list = res.result;
			}
		};
		const clickStar = () => {
			ElMessageBox.prompt("请输入收藏名称", "添加收藏", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
				inputErrorMessage: "收藏名称不能为空"
			})
				.then(async (value: any) => {
					let res = await reportAdd({ name: value.value, queryData: formData });
					let ok = showTips(res.code, "添加", res.message);
					if (ok) {
						getList();
					}
				})
				.catch(() => {});
		};
		const delStaar = async (id: string) => {
			let res = await reportDel({ id });
			let ok = showTips(res.code, "删除", res.message);
			if (ok) {
				getList();
			}
		};
		const handleCurrentChange = (val: number) => {
			Pageable.pageIndex = val;
			getReport();
		};
		const Pageable = reactive({
			pageIndex: 1,
			pageSize: 20,
			total: 0
		});
		const activeName = ref("first");
		const chartView = ref<any>();
		return () => {
			return (
				<div>
					<el-drawer v-model={drawer.visible} title="收藏列表">
						{drawer.list.map((item: any) => {
							return (
								<div class="flex justify-between hover:opacity-70 mb-4">
									<div>{item.name}</div>
									<div class="flex">
										<el-button
											link
											type="primary"
											onClick={() => {
												formData.daterange = item.queryData?.daterange || formData.daterange;
												formData.variable = item.queryData?.variable || formData.variable;
												drawer.visible = false;
											}}
										>
											选择
										</el-button>
										<el-button
											link
											type="danger"
											onClick={() => {
												delStaar(item.id);
											}}
										>
											删除
										</el-button>
									</div>
								</div>
							);
						})}
					</el-drawer>
					<VariableDialog
						width="80vw"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={detailDialog.detail}
						onSubmit={submitAdd}
					></VariableDialog>
					<el-form label-width="auto" inline>
						<el-form-item label="时间范围">
							<div class="flex">
								<el-date-picker v-model={formData.daterange} type="daterange" />
								<el-button
									type="primary"
									class="ml-3"
									onClick={() => {
										Pageable.pageIndex = 1;
										getReport();
									}}
								>
									查询
								</el-button>
							</div>
						</el-form-item>
						<el-form-item label="变量">
							<div class="flex">
								<el-select
									class="select-none"
									style="width: 30vw"
									v-model={formData.variable}
									multiple
									value-key="label"
									placeholder=" "
								></el-select>

								<el-button-group class="ml-3">
									<el-button
										icon={Menu}
										type="primary"
										onClick={() => {
											detailDialog.visible = true;
										}}
									>
										选择变量
									</el-button>
									<el-button
										icon={StarFilled}
										type="primary"
										onClick={() => {
											drawer.visible = true;
										}}
									>
										选择收藏
									</el-button>
									<el-button type="warning" icon={Star} onClick={clickStar} />
								</el-button-group>
							</div>
						</el-form-item>
					</el-form>
					<el-tabs
						type="border-card"
						v-model={activeName}
						class="demo-tabs"
						onTabChange={() => {
							Pageable.pageIndex = 1;
							getReport();
						}}
					>
						<el-tab-pane label="列表" name="first">
							<el-table data={tableData.value} border style="width: 100%;height:70vh">
								{formData.variable.length ? <el-table-column prop="updateTime" label="更新时间" /> : null}
								{formData.variable.map((item: any) => {
									return <el-table-column prop={item.key} label={item.label} />;
								})}
							</el-table>
							<el-pagination
								background
								layout="prev, pager, next"
								v-model:current-page={Pageable.pageIndex}
								default-page-size={Pageable.pageSize}
								total={Pageable.total}
								onCurrentChange={handleCurrentChange}
							/>
						</el-tab-pane>
						<el-tab-pane label="图表" name="second">
							<BaseChart class="pl-4 pr-4 pb-6 bg-white" ref={chartView} height="70vh" showZoom />
						</el-tab-pane>
					</el-tabs>
				</div>
			);
		};
	}
});
